.carousel5 {
    border-radius: 20px;
    width: 1400px;
    margin: auto;
    background-color: #FFF;
    margin-top: -210px;
    position: relative;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    .carousel5_header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 30px 30px;


        .element {
            border: 1px #dadde3 solid;
            width: 200px;
            color: #4f5559;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 40px;
            padding: 20px;
            white-space: nowrap;
            /* 防止文字换行 */
            overflow: hidden;
            /* 隐藏溢出的文字 */
            text-overflow: ellipsis;
            /* 使用省略号代替溢出的文字 */
            display: flex;
            justify-content: center;
            align-items: center;

            .color1 {
                width: 10px;
                height: 10px;
                margin-right: 10px;
                border-radius: 10px;
                background-color: #03a76a;
            }

            .color2 {
                width: 10px;
                height: 10px;
                margin-right: 10px;
                border-radius: 10px;
                background-color: #e39169;
            }

            .color3 {
                width: 10px;
                height: 10px;
                margin-right: 10px;
                border-radius: 10px;
                background-color: #122e82;
            }

            .color4 {
                width: 10px;
                height: 10px;
                margin-right: 10px;
                border-radius: 10px;
                background-color: #7743db;
            }

            .color5 {
                width: 10px;
                height: 10px;
                margin-right: 10px;
                border-radius: 10px;
                background-color: #3a8ef6;
            }

            span {
                width: 100px;
                text-align: center;
                white-space: nowrap;
                /* 防止文字换行 */
                overflow: hidden;
                /* 隐藏溢出的文字 */
                text-overflow: ellipsis;
                /* 使用省略号代替溢出的文字 */
            }
        }

        .element:hover {
            border: 1px solid #979797;
        }
    }

    .line1 {
        height: 2px;
        background-color: #03a76a;
        animation: scroll1 5s linear infinite;
    }

    .line2 {
        height: 2px;
        background-color: #e39169;
        animation: scroll2 5s linear infinite;
    }

    .line3 {
        height: 2px;
        background-color: #2751d0;
        animation: scroll3 5s linear infinite;
    }

    .line4 {
        height: 2px;
        background-color: #7743db;
        animation: scroll4 5s linear infinite;
    }

    .line5 {
        height: 2px;
        background-color: #3a8ef6;
        animation: scroll5 5s linear infinite;
    }

    .carousel5_body {
        border-radius: 20px;
        height: 540px;
        padding: 30px 60px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .body_left {
            width: 700px;

            .left_title {
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
                font-size: 40px;
                margin-top: 30px;
            }

            .left_centent {
                color: #4f5559;
                margin-top: 40px;
                font-size: 26px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                margin-bottom: 40px;
            }
        }

        .textAnimation {
            display: block;
            animation: tracking-in-expand-fwd-bottom 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        }

        .textAnimation_none {
            display: none;
            animation: none;
            animation-play-state: paused;
            animation-fill-mode: forwards;
        }

        .body_right {
            width: 500px;

            img {
                width: 100%;
            }
        }
    }
}





@keyframes tracking-in-expand-fwd-bottom {
    0% {
        -webkit-transform: translateZ(-70px) translateY(50px);
        transform: translateZ(-70px) translateY(50px);
        opacity: 0;
    }

    40% {
        opacity: 0.1;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

@keyframes scroll1 {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes scroll2 {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes scroll3 {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes scroll4 {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes scroll5 {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}